
/*  项目公共样式*/

@theme-color: #cc3b33;

// 字体颜色
@font-base-color: #1a1a1a;
@font-active-color: #1a1a1a;
@font-dark-color: #b2b2b2;
@font-orange-color: #cfa972;
@f: #ffffff;

@bg-base-color: #ffffff;
@bg-dark-color: #ededed;
@border-color: #ededed;

@font-size-22: 22upx;
	@font-size-24: 24upx;
	@font-size-26: 26upx;
	@font-size-28: 28upx;
	@font-size-30: 30upx;
	@font-size-32: 32upx;
	
	.orange{
		color: @font-orange-color;
	}
	.theme{
		color: @theme-color;
	}
	.f22{
		font-size: @font-size-22;
	}
	.f24{
		font-size: @font-size-24;
	}
	.f26{
		font-size: @font-size-26;
	}
	.f28{
		font-size: @font-size-28;
	}
	.f30{
		font-size: @font-size-30;
	}
	.f32{
		font-size: @font-size-32;
	}
	.bb{
		border-bottom: 1px solid @border-color;
	}
	.mt0 {
	  margin-top: 0 !important;
	}
	
	.mb0 {
	  margin-bottom: 0 !important;
	}
	
	.pt0 {
	  padding-top: 0 !important;
	}
	.pb0 {
	  padding-bottom: 0 !important;
	}
	.p0 {
	  padding: 0 !important;
	}
	.bbnone {
	  border-bottom: none !important;
	}
	.brnone {
	  border-right: none !important;
	}
	.br{
		border-radius: 10upx;
	}
	.btn{
		text-align: center;
		height: 80upx;
		line-height: 80upx;
		border-radius: 80upx;
		color: @f;
		.f32;
		background: @font-orange-color;
		padding: 0 30upx;
	}
	.text-overflow {
	  max-width: 100%;
	  box-sizing: border-box;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	.flex-base {
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	}
	.rich-text {
		line-height: 40upx;
		font-size: 28upx;
		color: @font-base-color;
		max-width: 750rpx;
		overflow: hidden;
	  img {
	    margin: 0 auto;
	    display: inline-block;
	    max-width: 100%;
		overflow: hidden;
	  }
	}
	.bg-line {
	  background: linear-gradient(to right, #2783ff, #2bcaff);
	}
	.fw{
	  font-weight: bold;
	}
	.desc{
		.f24;
		color: @font-dark-color;
	}
	.price{
		color: @theme-color;
		.f30;
		.fw;
	}
	.origin-price{
		.f22;
		color: @font-dark-color;
		text-decoration: line-through;
	}
	.icon-select{
		
	}
	.yuan:before{
	  content: '￥';
	  display: inline-block;
	  font-size: @font-size-22;
	}
	.interval {
	  height: 20upx;
	  width: 100%;
	  background: @bg-dark-color;
	}
	.content-30 {
	  padding: 30upx;
	  box-sizing: border-box;
	  width: 100%;
	}
	.content-20 {
	  padding: 20upx;
	  box-sizing: border-box;
	  width: 100%;
	}
	.footer-block {
	  height: 100upx;
	}
	.placeholder-class {
	  font-size: @font-size-24;
	  color: @font-dark-color;
	}
	
	.page-bg{
	  position: absolute;
	  width: 100%;
	  min-height: 100%;
	  background: @bg-dark-color;
	  left: 0;
	  top: 0;
	}
	// 页面底部浮动按钮
	.page-submit {
	  height: 90upx;
	  width: 100%;
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  text-align: center;
	  line-height: 90upx;
	  color: #fff;
	  letter-spacing: 3upx;
	  font-size: @font-size-28;
	  background: @font-orange-color;
	  border: none;
	  outline: none;
	  border-radius: unset;
	}
	
	.circular-submit {
	  height: 90upx;
	  width: 690upx;
	  text-align: center;
	  line-height: 90upx;
	  color: #fff;
	  letter-spacing: 3upx;
	  font-size: @font-size-30;
	  background: @font-orange-color !important;
	  border: none;
	  outline: none;
	  border-radius: 100upx;
	  margin: 0 auto ;
	}
	.circular-default{
	  background: #cccccc;
	}
	.circular-tip{
	  margin-top: 35upx;
	  width: 100%;
	  text-align: center;
	  color: @theme-color;
	}
	
	.no-info{
		text-align: center;
		line-height: 50px;
	}
	
	.link{
		display: flex;
		align-items: center;
		&::after{
			content: '';
			display: block;
			width: 12upx;
			height: 30upx;
			padding-left: 10upx;
			background: url(static/common/icon_01.png) no-repeat;
			background-position: 10upx center;
			 background-size: 12upx auto;
			 flex-shrink: 0;
		}
	}
	
	
/* form表单样式 */
	.form-wrap{
		padding: 0 20upx;
		box-sizing: border-box;
		background-color: @f;
		button{
			background-color: transparent ;
			border: none;
			outline: none;
			padding: 0;
			margin: 0;
			&::after{
				border: none;
				display: none;
			}
		}
		.btn-get{
			.f28;
			color: @font-orange-color;
			height: 100%;
			width: 155rpx;
			line-height: 100rpx;
			text-align: right;
		}
		.clear-input{
			width: 20rpx;
			height: 20rpx;
		}
		.form-group__active{
			border-bottom: 2px solid @font-orange-color;
		}
	}
	.form-group{
		.flex-base;
		height: 100upx;
		border-bottom: 1px solid @border-color;
		background: @f;
	}
	.form-group:last-child{
		border-bottom: none;
	}
	.form-group__title{
		color: #1a1a1a;
		font-size: @font-size-32;
		flex-shrink: 0;
		width: 180upx;
	}
	.form-group__con{
		flex-grow: 2;
		height: 100%;
		.form-group__from{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
		}
		.form-group__picker{
			width: 100%;
			height: 100%;
		}
	}
	.form-group__address{
		line-height: 100rpx;
		.text-overflow;
	}
	.form-wrap{
		.form-group__upload{
			height: auto;
		}
	}
	.form-group__upload{
		flex-wrap: wrap;
		height: auto;
		min-height: 100upx;
		padding: 20upx 0;
		
		.form-group__title{
			width: 100%;
			padding-bottom: 20upx;
		}
		.form-group__con{
			width: 100%;
			display: flex;
		}
		.upload-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 20upx;
			overflow: hidden;
			height: auto;
		}
		.upload-img{
			width: 100upx;
			height: 100upx;
			flex-shrink: 0;
		}
		.upload-tip{
			color: @font-dark-color;
			font-size: @font-size-24;
			margin-top: 10rpx;
		}
	}
	.form-group__text{
		width: 100%;
		padding: 20upx 0;
		height: auto;
		.form-group__from{
			height: 200upx;
			width: 100%;
		}
	}
	
	.icon-del{
		background: url() no-repeat left center;
		background-size: 26upx 26upx;
	}
	.icon-select{
		background: url() no-repeat left center;
		background-size: contain;
		flex-shrink: 0;
		transition: all 0.3s ease-in-out;
	}
	.icon-select__on{
		background: url() no-repeat left center;
		background-size: contain;
		flex-shrink: 0;
	}
	.index-search{
		background: @bg-base-color;
		height: 60upx;
		width: 100%;
		border-radius: 30upx;
		margin-bottom: 20upx;
		.flex-base;
		justify-content: flex-start;
		padding: 0 20upx;
		box-sizing: border-box;
		line-height: 60upx;
		.search-icon{
			width: 25upx;
			height: 25upx;
			flex-shrink: 0;
		}
		.search-text{
			flex-grow: 2;
			color: @font-dark-color;
			font-size: @font-size-24;
			padding: 0 20rpx;
		}
		.search-input{
			.f26;
			color: @font-base-color;
			height: 60rpx;
			line-height: 60rpx;
			flex-grow: 2;
			padding: 0 20rpx;
		}
		.search-icon__close{
			width: 40rpx;
			height: 40rpx;
			padding: 12rpx;
			box-sizing: border-box;
		}
	}
	
	
	/* 商品列表 */
	.goods-item {
		.flex-base;
		.br;
		margin-bottom: 20upx;
		background-color: @f;
		.content-20;
		.goods-img {
			width: 200upx;
			height: 200upx;
			.br;
			margin-right: 30upx;
			flex-shrink: 0;
		}
		.goods-info {
			flex-grow: 2;
		}
		.goods-title {
			.f30;
			width: 100%;
			line-height: 40upx;
			max-height: 80rpx;
			overflow: hidden;
		}
		.goods-price {
			width: 100%;
			.flex-base;
			justify-content: flex-start;
			.origin-price{
				flex-grow: 2;
				margin-left: 10upx;
			}
			.num {
				.btn;
				height: 50upx;
				line-height: 50upx;
				.f24;
			}
			.once-buy{
				height: 50rpx;
				line-height: 50rpx;
				.f24;
				margin-top: 20rpx;
			}
		}
	
	}
	.goods-list{
		.once-buy{
			height: 50rpx;
			line-height: 50rpx;
			.f24;
			margin-top: 20rpx;
		}
	}
	
	// 平团人数
	.team-num{
		position: absolute;
		left: 20upx;
		top: 20upx;
		background: @theme-color;
		height: 35upx;
		text-align: center;
		line-height: 35upx;
		border-radius: 10upx 0 10upx 0;
		font-size: 20upx;
		color: #ffe280;
		padding: 0 15upx;
	}
	.shop-num{
			border-radius: 50upx;
			border: 1px solid @border-color;
			text-align: center;
			line-height: 50upx;
			.flex-base;
			justify-content: flex-end;
			box-sizing: border-box;
			.op-num{
				width: 50upx;
				height: 100%;
				font-size: 50upx;
			}
			.num{
				width: 50upx;
				height:50upx;
				border-left: 1px solid @border-color;
				border-right: 1px solid @border-color;
			}
		}
	// 进入店铺按钮
	.shop-shop {
		background-color: @f;
		padding: 20upx;
		box-sizing: border-box;
		.flex-base;
		margin-bottom: 20upx;
		.br;
		.shop-shop__icon {
			width: 80upx;
			height: 80upx;
			flex-shrink: 0;
			.br;
			border: 1px solid @border-color;
		}
		.shop-shop__info {
			margin: 0 10upx;
			flex-grow: 2;
		
			.shop-shop__title {
				width: 100%;
				.f24;
				display: block;
				margin-bottom: 10rpx;
			}
		
			.shop-shop__desc {
				.f22;
				color: @font-dark-color;
				display: block;
			}
		
		}
		.shop-shop__view {
			border-radius: 30upx;
			height: 50upx;
			text-align: center;
			line-height: 50upx;
			border-color: @font-orange-color;
			border: 1px solid @font-orange-color;
			padding: 0 30upx;
			color: @font-orange-color;
			.f24;
		}
		
	}
	
	
	.shop-column{
		background-color: @f;
		.br;
		.flex-base;
		padding: 0 20upx;
		box-sizing: border-box;
		height: 80upx;
		margin-bottom: 20upx;
		.shop-column__op{
			width: 10upx;
			height: 10upx;
		}
		.shop-column__active{
			color: @font-orange-color;
		}
		.shop-column__price{
			position: relative;
			padding-right: 30rpx;
			&::before{
				content: '';
				display: block;
				width: 0;
				border: 10rpx solid @f;
				border-top: none;
				border-bottom-color: @font-orange-color;
				position: absolute;
				right: 0;
				top: 8rpx;
			}
			&::after{
				content: '';
				display: block;
				width: 0;
				border: 10rpx solid @f;
				border-bottom: none;
				border-top-color: @font-dark-color;
				position: absolute;
				right: 0;
				bottom: 6rpx;
			}
		}
		.shop-column__price2{
			position: relative;
			padding-right: 30rpx;
			&::before{
				content: '';
				display: block;
				width: 0;
				border: 10rpx solid @f;
				border-top: none;
				border-bottom-color:@font-dark-color;
				position: absolute;
				right: 0;
				top: 8rpx;
			}
			&::after{
				content: '';
				display: block;
				width: 0;
				border: 10rpx solid @f;
				border-bottom: none;
				border-top-color: @font-orange-color;
				position: absolute;
				right: 0;
				bottom: 6rpx;
			}
		}
	}
	
	
	.tpl-pt{
		width: 100%;
	}
	.tpl-pt__scroll{
		width: 100%;
		height: 350upx;
		white-space: nowrap;
	}
	.tpl-pt__item{
		width: 250upx;
		padding: 10upx;
		padding-bottom: 0;
		box-sizing: border-box;
		background-color: @theme-color;
		position: relative;
		.br;
		white-space: nowrap;
		display: inline-block;
		margin-right: 20upx;
	}
	.tpl-pt__img{
		width: 100%;
		height: 260upx;
		display: block;
		.br;
	}
	.tpl-pt__title{
		color: @f;
		font-size: @font-size-24;
		.text-overflow;
		margin: 15upx 0;
	}
	.tpl-pt__price{
		.price{
			font-weight: bold;
			font-size: @font-size-32;
			color: #ffe280;
		}
		.origin-price{
			font-weight: bold;
			font-size: @font-size-22;
			color: @f;
			text-decoration: line-through;
			margin-left: 6upx;
		}
	}
	.tpl-pt__num{
		position: absolute;
		left: 20upx;
		top: 20upx;
		background: #e64239;
		height: 35upx;
		text-align: center;
		line-height: 35upx;
		border-radius: 10upx 0 10upx 0;
		font-size: 20upx;
		color: #ffe280;
		padding: 0 20upx;
	}
	
	.tpl-shop{
		width: 100%;
		background-color: @f;
		.br;
		padding: 20upx;
		box-sizing: border-box;
		padding-bottom: 0;
		.flex-base;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.tpl-shop__item{
		width: 48.5%;
		box-sizing: border-box;
		background-color: @f;
		position: relative;
		.br;
		white-space: nowrap;
		display: inline-block;
		margin-bottom: 20upx;
	}
	.tpl-shop__item:nth-of-type(3n) {
		margin-right: 0;
	}
	.tpl-shop__img{
		width: 100%;
		height: 260upx;
		display: block;
		.br;
	}
	.tpl-shop__title{
		color: @font-base-color;
		font-size: @font-size-24;
		.text-overflow;
		margin: 15upx 0;
	}
	.tpl-shop__price{
		.price{
			font-weight: bold;
			font-size: @font-size-32;
			color: @theme-color;
		}
		.origin-price{
			font-weight: bold;
			font-size: @font-size-22;
			color: @font-dark-color;
			text-decoration: line-through;
			margin-left: 6upx;
		}
	}
	
	.line-info-wrap {
		background-color: @f;
		.br;
		padding: 0 30rpx;
		box-sizing: border-box;
	
		.line-info {
			height: 100rpx;
			.flex-base;
			.bb;
		}
	
		.line-info:last-child {
			border-bottom: none;
		}
	
		.line-info__title {
			.f32;
		}
	
		.line-info__con {
			.f24;
			color: @font-dark-color;
		}
	}
	.line-info__long{
		.f24;
	}
	.scroll-menu{
		width: 100%;
		white-space: nowrap;
		height: 90upx;
		.menu-item{
			.f28;
			color: @font-base-color;
			width: 20%;
			display: inline-block;
			line-height: 90upx;
			text-align: center;
			
			.after-line{
				width: 0;
				display: block;
				border-radius: 6upx;
				background: @font-orange-color;
				position: absolute;
				bottom: 16upx;
				left: 0;
				right: 0;
				margin: 0 auto;
				transition: all 0.3s ease-in-out;
			}
		}
		.menu-item-active{
			color: @font-orange-color;
			font-weight: bold;
			position: relative;
			.after-line{
				width: 30upx;
				height: 6upx;
			}
		}
	}
	
	.pay-type{
		background: @f;
		padding: 0 20upx;
		box-sizing: border-box;
		.pay-type__item{
			width: 100%;
			height: 100upx;
			.flex-base;
			.bb;
		}
		.pay-type__item:last-child{
			margin-bottom: none;
		}
		.pay-type__icon{
			width: 38upx;
			height: 38upx;
			flex-shrink: 0;
		}
		.pay-type__type{
			.f32;
			flex-grow: 2;
			padding: 0 20upx;
		}
		.pay-type__select{
			width: 34upx;
			height: 34upx;
			flex-shrink: 0;
		}
	}
	
	.tpl-success {
		padding-top: 50rpx;
		.flex-base;
		flex-direction: column;
		justify-content: center;
	
		.success-icon {
			width: 100rpx;
			height: 100rpx;
			display: block;
		}
	
		.success-title {
			font-size: 34rpx;
			padding: 30rpx 0 20rpx 0;
		}
	
		.success-info {
			.f24;
			color: @font-orange-color;
			padding: 0 170rpx;
			text-align: center;
		}
	}